import { Component } from 'react'
import { connect } from 'react-redux'
import { INCREASE } from '../store/actionType'

class Add extends Component {
	render() {
		const { count, onIncrease } = this.props
		return (
			<div>
				{count}
				<button onClick={() => onIncrease(2)}>增加</button>
			</div>
		)
	}
}

/**
 * connnet的用法
 * React-Redux提供connect方法, 用于从 UI 组件生成容器组件
 * connect的意思, 就是将这两种组件连起来
 *
 * mapStateToProps:
 * 更新props作为输入源
 * 返回一个对象, key为UI界面对应的名称, value为state处理的结果
 *
 * mapDispatchToProps:
 * 更新action作为输出源
 * 触发action更新reducer, 进而更新state, 从而驱动参数1变化, 引起UI数据的变化
 *
 */
const mapStateToProps = state => {
	return {
		count: state.count,
	}
}

const mapDispatchToProps = dispatch => {
	return {
		onIncrease: count => {
			console.log('count...', count)
			return dispatch({ type: INCREASE, count })
		},
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(Add)
